<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sokit - TCP/UDP 网络通信工具</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <!--[if lt IE 9]>
    <script src="/static/js/html5shiv.min.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <header>
            <h1>Sokit - TCP/UDP 网络通信工具</h1>
            <div class="connection-status">
                <span id="connection-status">未连接</span>
            </div>
        </header>

        <nav class="tab-nav">
            <button class="tab-btn active" data-tab="transfer"><span>转发器</span></button>
            <button class="tab-btn" data-tab="client"><span>客户端</span></button>
            <button class="tab-btn" data-tab="server"><span>服务器</span></button>
            <button class="tab-btn" data-tab="tools"><span>工具</span></button>
            <button class="tab-btn" data-tab="notepad"><span>记事本</span></button>
        </nav>

        <div class="tab-content">
            <!-- 客户端标签页 -->
            <div id="client" class="tab-panel">
                <div class="panel-grid">
                    <div class="panel">
                        <h3>连接设置</h3>
                        <div class="form-group">
                            <label for="client-host">主机地址:</label>
                            <input type="text" id="client-host" placeholder="127.0.0.1" value="127.0.0.1">
                        </div>
                        <div class="form-group">
                            <label for="client-port">端口:</label>
                            <input type="text" id="client-port" placeholder="8080" value="8080">
                        </div>
                        <div class="form-group">
                            <label for="client-protocol">协议:</label>
                            <select id="client-protocol">
                                <option value="TCP">TCP</option>
                                <option value="UDP">UDP</option>
                            </select>
                        </div>
                        <div class="button-group">
                            <button id="client-connect" class="btn btn-primary">连接</button>
                            <button id="client-disconnect" class="btn btn-secondary" disabled>断开</button>
                        </div>
                        <div class="status-info">
                            <p id="client-status">状态: 未连接</p>
                        </div>
                    </div>

                    <div class="panel">
                        <h3>数据发送</h3>
                        <div class="form-group">
                            <label for="client-send-data">发送数据:</label>
                            <textarea id="client-send-data" placeholder="输入要发送的数据..."></textarea>
                        </div>
                        <button id="client-send" class="btn btn-primary">发送</button>
                    </div>

                    <div class="panel">
                        <h3>数据接收</h3>
                        <div class="data-display">
                            <textarea id="client-receive-data" readonly></textarea>
                        </div>
                        <button id="client-clear" class="btn btn-secondary">清空</button>
                    </div>
                </div>
            </div>

            <!-- 服务器标签页 -->
            <div id="server" class="tab-panel">
                <div class="panel-grid">
                    <div class="panel">
                        <h3>服务器设置</h3>
                        <div class="form-group">
                            <label for="server-port">监听端口:</label>
                            <input type="text" id="server-port" placeholder="8088" value="8088">
                        </div>
                        <div class="form-group">
                            <label for="server-protocol">协议:</label>
                            <select id="server-protocol">
                                <option value="TCP">TCP</option>
                                <option value="UDP">UDP</option>
                            </select>
                        </div>
                        <div class="button-group">
                            <button id="server-start" class="btn btn-primary">启动服务器</button>
                            <button id="server-stop" class="btn btn-secondary" disabled>停止服务器</button>
                        </div>
                        <div class="status-info">
                            <p id="server-status">状态: 未启动</p>
                        </div>
                    </div>

                    <div class="panel">
                        <h3>连接管理</h3>
                        <div class="connections-list">
                            <div id="connections-container">
                                <p>暂无客户端连接</p>
                            </div>
                        </div>
                        <button id="server-disconnect-selected" class="btn btn-secondary">断开选中</button>
                    </div>

                    <div class="panel">
                        <h3>数据发送</h3>
                        <div class="form-group">
                            <label for="server-send-data">发送数据:</label>
                            <textarea id="server-send-data" placeholder="输入要发送的数据..."></textarea>
                        </div>
                        <button id="server-send" class="btn btn-primary">发送到所有客户端</button>
                    </div>

                    <div class="panel">
                        <h3>数据接收</h3>
                        <div class="data-display">
                            <textarea id="server-receive-data" readonly></textarea>
                        </div>
                        <button id="server-clear" class="btn btn-secondary">清空</button>
                    </div>
                </div>
            </div>

            <!-- 数据传输标签页 -->
            <div id="transfer" class="tab-panel active">
                <div class="panel-grid">
                    <!-- 创建新转发 -->
                    <div class="panel">
                        <h3>🚀 创建新转发</h3>
                        <div class="form-group">
                            <label for="new-transfer-name">转发名称:</label>
                            <input type="text" id="new-transfer-name" placeholder="例如：Web服务转发" value="">
                        </div>
                        <div class="form-group">
                            <label for="new-local-host">本地监听IP:</label>
                            <div class="ip-selector">
                                <select id="new-local-host-select">
                                    <option value="">选择IP地址...</option>
                                    <option value="127.0.0.1">127.0.0.1 (本地回环)</option>
                                </select>
                                <span>或直接输入:</span>
                                <input type="text" id="new-local-host" placeholder="127.0.0.1" value="127.0.0.1">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="new-local-port">本地监听端口:</label>
                            <input type="text" id="new-local-port" placeholder="8080" value="8080">
                        </div>
                        <div class="form-group">
                            <label for="new-target-host">目标主机:</label>
                            <input type="text" id="new-target-host" placeholder="127.0.0.1" value="127.0.0.1">
                        </div>
                        <div class="form-group">
                            <label for="new-target-port">目标端口:</label>
                            <input type="text" id="new-target-port" placeholder="8081" value="8081">
                        </div>
                        <div class="form-group">
                            <label for="new-transfer-protocol">协议:</label>
                            <select id="new-transfer-protocol">
                                <option value="TCP">TCP</option>
                                <option value="UDP">UDP</option>
                            </select>
                        </div>
                        <button id="create-transfer" class="btn btn-primary">创建转发</button>
                    </div>

                    <!-- 转发列表 -->
                    <div class="panel">
                        <h3>📋 转发列表</h3>
                        <div id="transfer-list-container">
                            <div class="transfer-list">
                                <div class="empty-state">
                                    <p>暂无转发服务</p>
                                    <p>请在左侧创建新的转发服务</p>
                                </div>
                            </div>
                        </div>
                        <div class="button-group">
                            <button id="refresh-transfers" class="btn btn-secondary">刷新列表</button>
                            <button id="stop-all-transfers" class="btn btn-secondary">停止所有</button>
                        </div>
                    </div>
                </div>

                <!-- 转发详情 -->
                <div class="panel full-width">
                    <h3>📊 转发统计</h3>
                    <div class="stats-display">
                        <div class="stat-item">
                            <label>总转发数:</label>
                            <span id="total-transfers">0</span>
                        </div>
                        <div class="stat-item">
                            <label>运行中:</label>
                            <span id="running-transfers">0</span>
                        </div>
                        <div class="stat-item">
                            <label>总连接数:</label>
                            <span id="total-connections">0</span>
                        </div>
                        <div class="stat-item">
                            <label>传输字节:</label>
                            <span id="total-bytes">0 B</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 工具标签页 -->
            <div id="tools" class="tab-panel">
                <div class="panel-grid">
                    <div class="panel">
                        <h3>数据格式转换</h3>
                        <div class="converter-section">
                            <div class="form-group">
                                <label for="convert-input">输入数据:</label>
                                <textarea id="convert-input" placeholder="输入要转换的数据...&#10;支持格式：&#10;- 普通文本&#10;- 十六进制: 48 65 6C 6C 6F&#10;- 混合格式: Hello[20 57 6F 72 6C 64]"></textarea>
                            </div>
                            <div class="button-group">
                                <button id="convert-ascii-to-hex" class="btn btn-primary">ASCII → HEX</button>
                                <button id="convert-hex-to-ascii" class="btn btn-primary">HEX → ASCII</button>
                                <button id="convert-clear" class="btn btn-secondary">清空</button>
                            </div>
                            <div class="form-group">
                                <label for="convert-output">输出结果:</label>
                                <textarea id="convert-output" readonly></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="panel">
                        <h3>网络统计</h3>
                        <div class="stats-section">
                            <div class="stats-display">
                                <div class="stat-item">
                                    <label>发送字节:</label>
                                    <span id="stat-bytes-sent">0 B</span>
                                </div>
                                <div class="stat-item">
                                    <label>接收字节:</label>
                                    <span id="stat-bytes-received">0 B</span>
                                </div>
                                <div class="stat-item">
                                    <label>发送速率:</label>
                                    <span id="stat-send-rate">0 B/s</span>
                                </div>
                                <div class="stat-item">
                                    <label>接收速率:</label>
                                    <span id="stat-receive-rate">0 B/s</span>
                                </div>
                                <div class="stat-item">
                                    <label>活动连接:</label>
                                    <span id="stat-active-connections">0</span>
                                </div>
                                <div class="stat-item">
                                    <label>总连接数:</label>
                                    <span id="stat-total-connections">0</span>
                                </div>
                                <div class="stat-item">
                                    <label>运行时间:</label>
                                    <span id="stat-uptime">0s</span>
                                </div>
                            </div>
                            <div class="button-group">
                                <button id="stats-refresh" class="btn btn-primary">刷新统计</button>
                                <button id="stats-reset" class="btn btn-secondary">重置统计</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 记事本标签页 -->
            <div id="notepad" class="tab-panel">
                <div class="panel full-width">
                    <div class="notepad-toolbar">
                        <button id="notepad-new" class="btn btn-secondary">新建</button>
                        <button id="notepad-open" class="btn btn-secondary">打开</button>
                        <button id="notepad-save" class="btn btn-secondary">保存</button>
                        <button id="notepad-clear" class="btn btn-secondary">清空</button>
                        <span class="file-info">
                            <span id="notepad-filename">未命名</span>
                            <span id="notepad-stats">字符数: 0 | 行数: 0</span>
                        </span>
                    </div>
                    <div class="notepad-editor">
                        <textarea id="notepad-content" placeholder="在这里输入文本内容..."></textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- 日志面板 -->
        <div class="log-panel">
            <h3>
                系统日志
                <button id="log-clear" class="btn btn-secondary">清空日志</button>
            </h3>
            <div class="log-content">
                <div id="log-container"></div>
            </div>
        </div>
    </div>

    <!-- 兼容IE的WebSocket -->
    <script src="/static/js/websocket-fallback.js"></script>
    <script src="/static/js/app.js"></script>
</body>
</html> 